﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <meta charset="utf-8">
    <title>btable</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
	<!-- bootstrap -->
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/bootstrap.min.js"></script>

	<script type="text/javascript" src="plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/btable.css" />
</head>

<body style=" background-color: gainsboro;">

	<!-- 弹出框 添加-->
	<div class="modal fade" id="manager_Add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<!-- 美化表单 -->
	<form class="form-horizontal" >
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">管理员信息</h4>
	      </div>
	      <div class="modal-body">
	        
			  <div class="form-group">
			    <label class="col-sm-2 control-label">管理员姓名</label>
			    <div class="col-sm-9">
			      <input type="text" name="musername" class="form-control">
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">管理员密码</label>
			    <div class="col-sm-9">
			      <input type="text" name="mpassword" class="form-control">
			    </div>
			  </div>
			  
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
	        <button type="button" id="managerAdd" class="btn btn-primary">添加</button>
	      </div>
	    </div>
	  </div>
	  </form>
	</div>	



<!-- 弹出框 修改 -->
	<div class="modal fade" id="car_upd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<!-- 美化表单 -->
	<form class="form-horizontal" name="myform" >
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">修改管理员信息</h4>
	      </div>
	      <div class="modal-body">
	        
	        
			  <div class="form-group">
			    <label class="col-sm-2 control-label">管理员用户名：</label>
			    <div class="col-sm-9">
			      <input type="text" name="musername" readonly="readonly" id="musername" class="form-control"  >
			      <input type="hidden" name="mid" id="mid" class="form-control"  >
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">密码：</label>
			    <div class="col-sm-9">
			      <input type="text" name="mpassword" id="mpassword" class="form-control"  >
			    </div>
			  </div>
			  
	
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
	        <button type="button" id="carupd" class="btn btn-primary">修改</button>
	      </div>
	    </div>
	  </div>
	  </form>
	</div>




    <div style="margin:0px; background-color: white; margin:0 10px;">
        <blockquote class="layui-elem-quote">
            <button type="button" class="layui-btn layui-btn-small" id="but_manager_Add">
	            <i class="fa fa-plus" aria-hidden="true"></i> 
	           	 添加
           	</button>
           
            
        </blockquote>
        <div id="content" style="width: 100%;height: 533px;">
	        <!-- 内容 -->
	        <div class="row">
				<div class="col-md-4 col-md-offset-8"></div>
			</div>
			<!-- 显示表格数据 -->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="manager_table">
						<thead>
							<tr>
								<th>#</th>
								<th>管理员姓名</th>
								<th>管理员密码</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						<!-- 车辆信息 -->
						</tbody>
	
					</table>
				</div>
			</div>
			<!-- 显示分页信息-->
			<div class="row">
				<!--分页文字信息  -->
				<div class="col-md-6" id="page_info_area"></div>
				<!-- 分页条信息 -->
				<div class="col-md-6" id="page_nav_area"></div>
			</div>
	    </div>
    </div>

    <script type="text/javascript">
    	var totalRecord,currentPage;
	    $(function(){
			//去首页
			to_page(1);
		});
    	
	    function to_page(pn){
			$.ajax({
				url:"managerSelAll.do",
				typt:"GET",
				data:"pn="+pn,
				success:function(data){
					/* 在网页F12Network中查看 */
					//console.log(data);
					//1、解析并显示员工数据
					build_emps_table(data);
					//2、解析并显示分页信息
					build_page_info(data);
					//3、解析显示分页条数据
					build_page_nav(data);
				}
			
			});
	    }

		function build_emps_table(data){
			//清空table表格
			$("#manager_table tbody").empty();
			var emps = data.list;
			$.each(emps,function(index,item){
				var midTd= $("<td></td>").append(item.mid);
				var musernameTd= $("<td></td>").append(item.musername);
				var mpasswordTd= $("<td></td>").append(item.mpassword);
		
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
				editBtn.attr('id',"edit"+item.mid);
				
				var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
				delBtn.attr('id',"dle"+item.mid);
				
				var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
				//var delBtn = 
				//append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
					.append(midTd)
					.append(musernameTd)
					.append(mpasswordTd)
					.append(btnTd)
					.appendTo("#manager_table tbody");
				
				//修改管理员
				$("#edit"+item.mid).click(function(){
					var mid=item.mid;
					selcarById(mid);
					reset_form("#car_upd form"); 
					$("#car_upd").modal({
						backdrop:"static"
					});
					//修改
					$("#carupd").click(function(){
						var mpassword=document.myform.mpassword.value;
						$.ajax({
							url:"updateguanli.do",
							type:"POST",
							data:{
								mid:item.mid,
								mpassword:mpassword
							},
							success:function(data){
								if(data==1){
									alert("修改成功！");
								}else{
									alert("修改失败！");
								}
								//1、模态框隐藏
								$("#car_upd").modal("hide");
								//2、回到本页面
								to_page(currentPage);
							}
						});
					}); 
				});
				
				//删除管理员
				$("#dle"+item.mid).click(function(){
					if(confirm("您确认要删除员工【"+item.musername+"】的信息吗")){
					$.ajax({
						url:"delmanagerById.do",
						type:"GET",
						/* 后台得到数据拼接方式  */
						data:"id="+item.mid,
						success:function(data){
							if(data==true){
								alert("删除成功");
								//回到本页面
								to_page(currentPage);
							}else{
								alert("删除成功");
								//回到本页面
								to_page(currentPage);
							}	
						}
					});
					}
				});
			});
		}
		//回显
		function selcarById(mid){
			$.ajax({
				url:"gselcarById.do",
				type:"GET",
				/* 后台得到数据拼接方式  */
				data:"mid="+mid,
				success:function(data){
					alert(data.musername);
					$("#mid").attr("placeholder",data.mid);
					$("#musername").attr("placeholder",data.musername);
					$("#mpassword").attr("placeholder",data.mpassword);
				}	
			});
			
		}
		//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").empty();
			$("#page_info_area").append("当前"+result.pageNum+"页,总"+
					result.pages+"页,总"+
					result.total+"条记录");
			totalRecord = result.total;
			currentPage = result.pageNum;
		}
		//解析显示分页条，点击分页要能去下一页....
		function build_page_nav(result){
			//page_nav_area
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			if(result.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.pageNum -1);
				});
			}
			
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			if(result.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.pages);
				});
			}
				
			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			//1,2，3遍历给ul中添加页码提示
			$.each(result.navigatepageNums,function(index,item){
				
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if(result.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		//清空表单样式及内容
		function reset_form(ele){
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			$(ele).find(".help-block").text("");
		}
			
		// 弹出窗 
		$("#but_manager_Add").click(function(){
			reset_form("#manager_Add form");
			//弹出前发送ajax请求 查询部门信息显示在下拉列表
			//弹出
			$("#manager_Add").modal({
				backdrop:"static"
			});
		});
		
		//提交模态框数据ADD
		$("#managerAdd").click(function(){
			$.ajax({
				url:"managerAdd.do",
				type:"POST",
				data:$("#manager_Add form").serialize(),
				success:function(data){
					if(data==true){
						alert("添加成功");
						//1、模态框隐藏
						$("#manager_Add").modal("hide");
						//2、回到本页面
						to_page(currentPage);
					}else{
						alert("添加失败");
						$("#manager_Add").modal("hide");
						//2、回到本页面
						to_page(currentPage);
					}	
				}
			});	
		});	
	</script>
</body>
</html>